//订阅详情
<template>
  <div>

    <!--   头-->
    <top @func="getSearch"></top>


    <div >
      <el-row>
        <el-col :span="2"><i class="el-icon-video-play"></i></el-col>
        <el-col :span="2"><a href="#">{{channelName}}</a></el-col>
          <el-col :span="2">今日发布了{{counts}}个帖子</el-col>
        <el-col :span="4" :offset="14">
          <el-button type="danger" class="el-icon-reading" @click="cancel(channelId,'del')" v-if="cancelFlag">退订</el-button>
          <el-button type="success" class="el-icon-reading" @click="cancel(channelId,'add')" v-if="addFlag">订阅</el-button>
        </el-col>

      </el-row>
      <!-- 顶部分页 -->
      <el-pagination background layout="prev, pager, next" :page-count="totalPage"
                     :page-size="size"
                     :current-page="currentPage"
                     @current-change="pageChange"
      ></el-pagination>
      <el-row>


        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in searchInfo" :key="item.id">
          <el-card :body-style="{ padding: '0px' }" class="card">
            <!-- 跳转到文章详情 并带上文章id -->
            <a :href="detailUrl(item.id)">
            <img
              :src="getImgsURL(item)"
              class="image"
              @click="jumpPageDetail(item.id)"
            >
            </a>
            <div style="padding: 14px;">
              <span>{{item.title}}</span>

              <div class="bottom clearfix">
                <el-row>
                  <!--                  <span>100k </span>-->
                  <!--                  <i class="el-icon-view"></i>-->
                  <!--图片数-->
<!--                  <span>{{item.imgs.length==0 ? 0 : item.imgs.split('&&').length}}P</span>-->
                  <!--                <span>{{item.imgs}}P</span>-->
                  <time class="time">{{dateUtil.stringParseDate(item.crDate,dateUtil.NOSS)}}</time>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>

      </el-row>

    <!-- 顶部分页 -->
      <el-pagination background layout="prev, pager, next" :page-count="totalPage"
                     :page-size="size"
                     :current-page="currentPage"
                     @current-change="pageChange"
      ></el-pagination>

  </div>
  </div>
</template>
<script>
  import top from "../common/Header.vue";
  import {ContentType} from "../constant/ContentType";
  import {ResultStatus} from "../constant/ResultStatus";
  import {StringUtil} from "../../utils/StringUtil";
  import PageArtical from '../common/PageCard'
  import {BasePageReq} from "../admin/req/BasePageReq";
  import {DateUtil} from "../../utils/DateUtil";
  import {Handle} from "../constant/Handle";
  import configs from "../rss/Index";
  import config from "@/config/";

  let basePage = new BasePageReq();
  export default {
    pops:{

    },
    data() {
      return {
        size:40,//数量
        currentPage:1, //当前页数
        search:"",//返回搜索字段
        totalPage:1,
        searchInfo:{},
        dateUtil:DateUtil,
        baseURL: this.$axios.defaults.baseURL,
        baseIMG: this.$axios.defaults.baseIMG,
        counts:this.$route.query.counts,
        channelId:this.$route.query.channelId,
        channelName:this.$route.query.channelName,
        addFlag:true, //订阅
        cancelFlag:true,//退订
        fileServer:this.$axios.defaults.fileServer,
      };
    },
    mounted(){
      this.queryPage();
      this.cancel(this.channelId,Handle.QUERY);
      this.getCounts();
    },
    methods:{
      /**
       * 获取top传来的搜索字段
       * @param data
       */
      getSearch(data){
        this.search = data;
        this.queryPage();

      },
      queryPage(){
        if(this.$route.query.page){
          this.currentPage = this.$route.query.page
        }
        else{
          this.currentPage  = 1;
        }

        basePage.size = this.size;
        basePage.page = this.currentPage;
        basePage.des = this.search;
        basePage.channelId = this.channelId;
        this.$axios
          .post('/channel/detailPage',
            basePage, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response)=>{
            let datas = response.data;
            if(datas.code != ResultStatus.SUCCESS){
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let datas2 = datas.data;
            this.size =  datas2.size;
            //替换图片
            for (let i = 0; i < datas2.list.length; i++) {
              let item = datas2.list[i];
              if (StringUtil.checkNull(item)) {
                continue;
              }
              //替换失效的文件服务
              let descre = StringUtil.replace(item.descre, config.invalidFileserver, config.replateFileserver)
              let otherPre = StringUtil.replace(item.otherPre, config.invalidFileserver, config.replateFileserver)
              let otherResourceFile = StringUtil.replace(item.otherResourceFile, config.invalidFileserver, config.replateFileserver)
              item.descre = descre;
              item.otherPre = otherPre;
              item.otherResourceFile = otherResourceFile
              datas2.list[i] = item;
            }
            this.searchInfo = datas2.list;
            this.totalPage = datas2.totalPage
            this.currentPage = datas2.page;

          })
          .catch((error)=>{
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      pageChange(page){
        this.currentPage = page;
        this.$router.push({page:'channel',query:{page:page,channelId:this.channelId,channelName:this.channelName}})
        this.queryPage();
      },
      /**
       * 预览图
       * @param data
       * @returns {string}
       */
      getImgsURL(data) {
        if (StringUtil.checkNull(data.preImg) && StringUtil.checkNull(data.otherPre)) {
          return this.baseIMG;
        }
        if(!StringUtil.checkNull(data.otherPre)){
          return data.otherPre;
        }

        return  this.fileServer + StringUtil.replace(data.preImg, '\\', '/');
      },
      detailUrl(data){
        return '/ArticalDetails?id=' + data;
      },
      /**
       * 页面跳转
       * @param data
       */
      jumpPageDetail(data) {

        this.$router.push({path: '/ArticalDetails?id=' + data})

      },
      /**
       * 取消订阅
       * @param channelId
       */
      cancel:async function (channelId,handler) {
        if (handler == Handle.DEL) {
        let flag = await this.confirmBox();
        if (!flag) {
          return;
        }
      }
        let rssReq = {handle:handler,channelId:channelId};
        this.$axios.post("/rss/save",rssReq,ContentType.APPLICATION_JSON)
          .then(response=>{
            let datas = response.data;
            if(datas.code == ResultStatus.SUCCESS){
              if(handler==Handle.QUERY){
                if(!StringUtil.checkNull(datas.data.channelId)){
                  this.addFlag = false;
                }
                else{
                  this.cancelFlag=false;
                }
                return;
              }
              this.$notify(StringUtil.success(datas.msg));
            }
            else{
              console.log(error);
              let datas = error.data;
              this.$notify(StringUtil.warning(datas.msg));
            }
            location.reload();//重新加载当前页面
          }).catch(error=>{

        })
      },
      /**
       * 确认框
       * @returns {boolean}
       */
      confirmBox: async function(){
        let flag = false;
        await  this.$confirm('是否取消订阅?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '取消订阅中。。。!'
          });
          flag = true;
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消操作'
          });
          flag = false;
        });
        return flag;
      },
      /**
       * 获取今日发帖子数量
       */
      getCounts(){
        if(!StringUtil.checkNull(this.$route.query.counts)){
          return;
        }
        this.$axios.get("/articalChannel/todayCounts",
          {
            params:{
              "channelId":this.$route.query.channelId,
            }


          }
        ).then(response=>{
          let datas = response.data;
            if(datas.code==ResultStatus.SUCCESS){
              this.counts = datas.data;
            }

        }).catch(error=>{
          console.log(error)
        })
      },




    },
    components:{
      top,//置顶
      PageArtical,//分页

    }



  }
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 462.953px ;
    height: 320px;

  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .card {
    transform: scale(0.8);
    width: 462.953px ;
    height: 423.375px;
  }
</style>

